import React, { useState } from "react";
import { Button, Divider } from "antd";
import {
    SmileTwoTone,
    PlusCircleTwoTone,
    SearchOutlined,
} from "@ant-design/icons";
import { Typography, Space } from "antd";
import { Row, Col } from 'antd';
import './Antd.css';

const { Text, Link } = Typography;
const { Paragraph } = Typography;


export default function Antd() {
    //声明状态
    const [editableStr, setEditableStr] = useState("今天晚上吃点啥???");

    return (
        <div>
            <Space direction="vertical" size={80}>
                <div>
                    <h2>按钮</h2>

                    <Space size={20}>
                        <Button type="primary">Primary Button</Button>
                        <Button type="primary" danger>
                            危险
                        </Button>
                        <Button type="primary" size="large">
                            首选
                        </Button>
                        <Button
                            type="primary"
                            shape="circle"
                            icon={<SearchOutlined />}
                        />

                        <Button
                            type="primary"
                            shape="circle"
                            loading
                            icon={<SearchOutlined />}
                        />
                    </Space>
                </div>

                <div>
                    <h2>图标</h2>
                    <SmileTwoTone style={{ fontSize: "36px" }} />
                    <PlusCircleTwoTone spin style={{ fontSize: "36px" }} />
                </div>

                <div>
                    <h2>排版</h2>
                    <Text mark>就你叫夏洛啊</Text>
                    <Paragraph editable={{ onChange: setEditableStr }}>
                        {editableStr}
                    </Paragraph>
                    <Paragraph copyable>
                        如果有一个喜欢你的人出现，一定不要凶她哦！
                    </Paragraph>
                </div>
                <div>
                    <h2>布局</h2>
                    <Divider>我是一个分割线哦</Divider>
                </div>
            </Space>

            <h2>栅格系统</h2>
            <Row className="shange" gutter={[16, 16]}>
                {
                    Array(48).fill(1).map(item => {
                        return <Col className='item' span={12} xs={12} sm={8} md={6} lg={4}  xl={3}>
                            <div className="img">

                            </div>
                        </Col>
                    })
                }
            </Row>
        </div>
    );
}
